<template>
<main>
    <v-header></v-header>
    <router-view></router-view>
    <footer>
        <div class="foot">
            <ul class="bottomnav">
                <li>
                    <router-link to="/main"><span><img src="../../assets/images/header/首页.png"></span>首页</router-link>
                </li>
                <li>
                    <router-link to="/product"><span><img src="../../assets/images/header/产品.png"></span>产品</router-link>
                </li>
                <li>
                    <router-link to="/shop"><span><img src="../../assets/images/header/导购.png"></span>导购</router-link>
                </li>
                <li>
                    <router-link to="/service"><span><img src="../../assets/images/header/服务.png"></span>服务</router-link>
                </li>
                <li>
                    <router-link to="/my"><span><img src="../../assets/images/header/我的.png"></span>我的</router-link>
                </li>
            </ul>
        </div>
    </footer>
</main>
</template>

<script>
import vheader from '../sub/header'

export default{
    components:{
      'v-header':vheader,
    },
    mounted(){
     this.$store.state.msg= "plus"
    },
    data(){
      return{

      }
    }

  }

</script>

<style scoped>
    footer{
        width:96%;
        line-height:60px;
        padding:0 7px;
        /* height:60px; */
        text-align:center;
        position:fixed;
        bottom:0;
        left:0;
        z-index:5;
        background:#fff;
        border-top:1px solid lightgray;
    }
    .bottomnav{
        width:100%;
        margin-top:10px;
    }
    .bottomnav>li{
        float: left;
        padding: 0 20px;
        overflow: hidden;
        /* background:pink; */
        position:relative;
        font-size: 16px;
        font-weight: initial;
    }
    .foot>.bottomnav span{
        position:absolute;
        top:-18px;
        left:28px;
    }
    .bottomnav>li>a{
        color:#0c5ca8;
        text-decoration:none;
    }
</style>
